<script setup>
import { ref } from 'vue';
const userInfo = ref({
   userImg: 'h.jpg'
});
const myitem2 = ref([
   { title: '阅读历史', icon: 'icon-lishi' },
   { title: '金选票', icon: 'icon-dianyingpiao' },
   { title: '书友圈', icon: 'icon-quanquanmendianb' },
   { title: '消息通知', icon: 'icon-xiaoxitongzhi' },
]);
const myitem3 = ref([
   { title: '我的评论', icon: 'icon-pinglun' },
   { title: '阅读喜好', icon: 'icon-aixin' },
   { title: '帮助与反馈', icon: 'icon-quanquanmendianb' },
   { title: '邀请好友', icon: 'icon-wodehaoyou' },
   { title: '金币提现', icon: 'icon-huobi-jinbi' },
   { title: '成为作家', icon: 'icon-bianji-gangbi' },
   { title: '青少年模式', icon: 'icon-zhengpinbaozhang-duigou' },
   { title: '设置', icon: 'icon-shezhi' },
]);
const myitem4 = ref([
   { title: '消息中心', url: '' },
   { title: '奖品中心', url: '' },
   { title: '已购书籍', url: '-' },
   { title: '意见反馈', url: '-' },
]);
</script>

<template>
   <div class="my">
      <div class="my-hd">
         <div class="my-hd-login">
            <div class="my-hd-img">
               <img :src="`/src/assets/images/${userInfo.userImg}`" alt="用户头像">
            </div>
            <div class="my-hd-item">
               <div class="tourist">游客</div>
               <router-link to="/login">
                  <button>点击登录</button>
               </router-link>
            </div>
         </div>

      </div>
      <div class="my-body">
         <div class="my-body-item1">
            <ul>
               <li>
                  <i class="iconfont icon-biyan"></i>
                  <p>我的金币</p>
               </li>
               <li>
                  <i class="iconfont icon-biyan"></i>
                  <p>我的金币</p>
               </li>
               <li>
                  <i class="iconfont icon-biyan"></i>
                  <p>今日听读 (分钟)</p>
               </li>
            </ul>
         </div>
         <div class="my-body-item2">
            <ul>
               <li v-for="(v, i) in myitem2" :key="i">
                  <i class="iconfont" :class="v.icon"></i>
                  <p>{{ v.title }}</p>
               </li>
            </ul>
         </div>
         <div class="my-body-item3">
            <ul>
               <li v-for="(v, i) in myitem3" :key="i">
                  <i class="iconfont" :class="v.icon"></i>
                  <p>{{ v.title }}</p>
               </li>
            </ul>
         </div>
         <div class="my-body-item4">
            <ul>
               <li v-for="(v, i) in myitem4" :key="i">
                  <p>{{ v.title }}</p>
                  <i class="iconfont icon-you"></i>
               </li>
            </ul>
         </div>
      </div>
   </div>
</template>

<style scoped></style>